<template>
  <div style="background-color: #ececec; padding: 20px">
    <a-row :gutter="15">
        <a-col>
          <a-card title="产品单耗统计" :bordered="false">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="起始时间:">
                <el-date-picker v-model="formInline.startTime" :type="formInline.datePickerType" placeholder="选择起始时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:">
                <el-date-picker v-model="formInline.endTime" :type="formInline.datePickerType" placeholder="选择结束时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="日期类型:">
                <el-select v-model="formInline.datePickerType" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </a-card>
        </a-col>
      </a-row><br>

    <template>
      <a-card style="width: 100%">
        <div style="width:100%; height:330px;">
            <div id="unitConsumption" class="five"></div>
          </div>
      </a-card>
    </template><br>

  </div>

</template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts';
  export default {
    data () {
      return {
        options: [{value: 'month', label: '月'}, {value: 'date', label: '天'}],
        chart1: null,
        chart2: null,
        formInline: {
          datePickerType: 'month',
          startTime: '',
          endTime: '',
        },
        data1:[],
        data2:[],
        baseline:[],
        url: {
          getProduct: '/product/product/allList',
          getUnitCarbonEmission: '/consumptionElectricity/consumptionElectricity/getUnitCarbonEmission',
          getbaseline: '/baseline/baseline/getCarbonBaseline',
        },
      }
    },
    methods: {
      getbaseline(){
        this.baseline = [];
        getAction(this.url.getbaseline).then((res)=>{
          res.result.forEach(e=>{
            this.baseline.push(e.carbonBaseline);
          })
        })
      },
      loadUnitCarbonEmission(){
        var endDate = new Date();
        var startDate = (endDate.getFullYear()-1)+"/"+(endDate.getMonth()+1);
        let data1 = [];
        let data2 = [];
        this.formInline.startTime = new Date(Date.parse(startDate));
        this.formInline.endTime = endDate;
        postAction(this.url.getUnitCarbonEmission,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(item=>{
            data1.push(item.product);
            data2.push(item.unitCarbonEmission);
          })
          this.data1 = data1;
          this.data2 = data2;
        })
      },
      onSubmit() {
        let data1 = [];
        let data2 = [];
        if('month' == this.formInline.datePickerType){
          let endTime = new Date(this.formInline.endTime);
          let year = endTime.getFullYear();
          let month = endTime.getMonth()+1;
          let lastDate = new Date(year, month , 0).getDate();
          month = month < 10 ? '0' + month : month ;
          endTime = [year,month ,lastDate ].join("-")+" 23:59:59";
          this.formInline.endTime = new Date(endTime);
        }
        postAction(this.url.getUnitCarbonEmission,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(item=>{
            data1.push(item.product);
            data2.push(item.unitCarbonEmission);
          })
          this.data1 = data1;
          this.data2 = data2;
        })
        setTimeout(() => {
          this.getzhu()
        }, 500)
      },
      getzhu(){
        if(this.chart1 != null && this.chart1 != '' && this.chart1 != undefined){
          this.chart1.dispose();
        }
        var chartDom = document.getElementById('unitConsumption');
        this.chart1 = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '产品单耗'
          },
          tooltip: {
            trigger: 'axis', // 触发类型，在饼形图中为item
          },
          legend: {
            data: ['单耗(Kwh/个)','基线'],
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            },
            padding: [0,15,0,0]
          },
          xAxis: {
            type: 'category',
            data: this.data1,
          },
          yAxis: {
            type: 'value',
            name: 'Kwh/个'
          },
          series: [
            {
              name: '单耗(Kwh/个)',
              data: this.data2,
              type: 'bar',
              // markLine: {
              //   // itemStyle: {
              //   //   // 基线公共样式
              //   //   normal: { 
              //   //     lineStyle: {
              //   //       // 'solid'实线；'dashed'虚线；'dotted'点线
              //   //       type: 'dashed',
              //   //     }, 
              //   //     label: { 
              //   //       show: true,
              //   //       position: 'end',
              //   //       formatter: '{b}{c}',
              //   //     }
              //   //   },
              //   // },
              //   data: [
              //     {
              //         name: '产品单耗基线',
              //         type: 'average',
              //         yAxis: 1.3,
              //         lineStyle: {
              //             color: '#ff0000',
              //         }
              //     },
              //   ],
              // },
            },
            {
              name: '基线',
              data: this.baseline,
              smooth:false,
              symbol:'circle',
              color:['red'],
              type: 'line',
              lineStyle: {
                type:'dotted'
              },
            }
          ],
        };
        option && this.chart1.setOption(option,true);
      },
    },
    created () {
      setTimeout(() => {
        this.loadUnitCarbonEmission();
        this.getbaseline();
      }, 400)
      setTimeout(() => {
        
      }, 700)
    },
    mounted(){
      //this.datasource = data
      setTimeout(() => {
        this.getzhu();
      }, 1000)
    },
  }
</script>

<style>
 .sousuo{
  font-size: 14px;
  display: inline;
  /* font-weight:bold; */
 }
 .five {
  width: 100%;
  height: 100%;
}
</style>
  
  
  